<template>
  <div>
    <page-header title="采购订单列表">
      <n-button type="primary">新增</n-button>
    </page-header>
    <div class="mt-[16px]">
      <n-grid x-gap="12" :cols="24">
        <n-gi :span="8">
          <n-input
            clearable
            v-model:value="paginationResult.id"
            placeholder="请输入订单编号"
            @update:value="handleSearch"
          />
        </n-gi>
        <n-gi :span="8">
          <n-select
            v-model:value="paginationResult.status"
            :options="PURCHASE_ORDER_STATUS"
            clearable
            placeholder="请选择订单状态"
            @update:value="handleSearch"
          />
        </n-gi>
        <n-gi :span="8">
          <n-date-picker
            type="daterange"
            clearable
            start-placeholder="订单创建开始时间"
            end-placeholder="订单创建结束时间"
            v-model:value="paginationResult.createTimeRange"
            @update:value="handleSearch"
          />
        </n-gi>
      </n-grid>
      <div class="mt-[16px]"></div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
        maxHeight="66vh"
        minHeight="48vh"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { h, onMounted } from "vue";
import { useRouter } from "vue-router";
import { debounce } from "lodash-es";
import dayjs from "dayjs";
import { NButton, NIcon } from "naive-ui";
import { CreateOutline, Print, NotificationsCircle } from "@vicons/ionicons5";
import { getPurchaseOrderList } from "@/api/purchase/purchase.api";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import * as RouterNames from "@/router/routerNames/index";
import DictTag from "@/components/biz/dictTag/index.vue";
import { currencyFormat } from "@/common/utils/currencyFormatter/index.ts";
import { DictStorage } from "@/storage/dict.storage";

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    width: "5%",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "订单编号",
    key: "num",
    render: (row: any) => {
      return `#${row.num}`;
    },
  },
  {
    title: "订单状态",
    key: "status",
    render: (row: any) => {
      return h(DictTag, {
        dict: "pos_purchase_status",
        value: row.status,
        bordered: false,
      });
    },
  },
  {
    title: "订单金额",
    key: "total",
    render: (row: any) => {
      return currencyFormat(row.total);
    },
  },
  {
    title: "已支付金额",
    key: "paidAmount",
    render: (row: any) => {
      return currencyFormat(row.paidAmount);
    },
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    key: "actions",
    align: "right",
    render: (_: any) => {
      return [
        h(
          NButton,
          {
            size: "small",
            type: "success",
            secondary: true,
            strong: true,
            class: "mr-2",
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(NotificationsCircle),
              }),
          }
        ),
        h(
          NButton,
          {
            size: "small",
            type: "warning",
            secondary: true,
            strong: true,
            class: "mr-2",
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(Print),
              }),
          }
        ),
        h(
          NButton,
          {
            size: "small",
            type: "primary",
            secondary: true,
            strong: true,
            onClick: () => {
              handleNavToDetail(_.id);
            },
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(CreateOutline),
              }),
          }
        ),
      ];
    },
  },
];

const PURCHASE_ORDER_STATUS = DictStorage.getDictItemsByCode(
  "pos_purchase_status"
);

const router = useRouter();

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: getPurchaseOrderList,
  queryForm: {
    type: "regular",
    id: "",
    status: undefined,
    createTimeRange: null,
  },
  likeKeys: ["id"],
  beforeFetch: (params) => {
    if (params.createTimeRange) {
      const [start, end] = params.createTimeRange;
      console.log(params);
      if (start) {
        params.createTime_begin = dayjs(start).format("YYYY-MM-DD 00:00:00");
      }

      if (end) {
        params.createTime_end = dayjs(end).format("YYYY-MM-DD 23:59:59");
      }
    }
  },
});

const handleNavToDetail = (id: string) => {
  router.push({
    name: RouterNames.PURHCASE_ORDER_DETAIL_PAGE.NAME,
    params: { id },
  });
};

const handleSearch = debounce(function () {
  paginationResult.page = 1;
  getDataList();
}, 200);

onMounted(() => {
  getDataList();
});
</script>
